<template>
  <div>
    <custom-dialog v-model:visible="isShowDialog">
      <div class="dialog-content">
        <div class="title"></div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <div class="title">打印机名称</div>
          <el-input class="input" v-model.trim="form.nick_name"></el-input>
        </div>
        <div class="form-item">
          <div class="title">所属计算机</div>
          <el-select class="select" v-model="form.computer_id" >
            <el-option v-for="item in computerListData" :key="item.computer_id" :value="item.computer_id" :label="item.nick_name" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="title">选择打印机</div>
          <el-select class="select" v-model="form.real_name" >
            <el-option v-for="item in printerList" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="title">厨房打印机</div>
          <div class="check-box">
            <div class="check-box-item">
              <img class="img" @click="handleChange(false)" :src="!form.isKitchen ? isCheckImg : noCheckImg" alt="" />
              <span class="check-title">否</span>
            </div>
            <div class="check-box-item">
              <img class="img" @click="handleChange(true)" :src="form.isKitchen ? isCheckImg : noCheckImg" alt="" />
              <span class="check-title">是</span>
            </div>
          </div>
        </div>
      </div>
      <div class="receive-bottom-btn">
        <div class="cancel-btn" @click="onCancel">取消</div>
        <div class="confirm-btn" :class="isHasValue ? 'active' : ''" @click="onConfirm">确定</div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup>
import noCheckImg from "@/assets/images/components/not-check.png";
import isCheckImg from "@/assets/images/components/ischecked.png";
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { printerAdd, printerEdit, computerList } from '@/api/computer'
// import { getPrinterList } from '@/api/printer'
import { throttle } from '@/utils/toolsValidate'
import CustomDialog from '@/components/CustomDialog/Index.vue'

const props = defineProps({
  addPrinterVisible: { type: Boolean, default: false },
  actionType: { type: String, default: 'add' },
  printerEditData: { type: Object, default: () => ({}) }
})
const emit = defineEmits(['update:addPrinterVisible', 'onConfirm'])

const isShowDialog = computed({
  get: () => props.addPrinterVisible,
  set: val => emit('update:addPrinterVisible', val)
})
console.log('addPrinterVisible：》》', props.addPrinterVisible)


const form = reactive({ isKitchen: false, computer_id: '', real_name: '', nick_name: '' })
const printerList = ref([])
const computerListData = ref([])

const isHasValue = computed(() => Object.values(form).every(v => v !== ''))

watch(
  () => isShowDialog.value,
  val => {
    if (val) {
      fetchPrinterList()
      getComputerList()
      if (props.actionType === 'add') {
        form.isKitchen = false
        form.computer_id = ''
        form.real_name = ''
        form.nick_name = ''
      } else if (props.actionType === 'edit') {
        Object.assign(form, props.printerEditData)
      }
    }
  }
)

function onCancel() {
  console.log('取消')
  isShowDialog.value = false
}

const onConfirm = throttle(function () {
  if (!isHasValue.value) return
  if (props.actionType === 'add') {
    const datas = { computer_id: form.computer_id, type: Number(form.isKitchen), real_name: form.real_name, nick_name: form.nick_name }
    printerAdd(datas).then(res => {
      if (res.status === 200) {
        ElMessage.success('添加成功')
        isShowDialog.value = false
        emit('onConfirm')
      }
    })
    return
  }
  printerEdit({ computer_id: form.computer_id, type: Number(form.isKitchen), real_name: form.real_name, nick_name: form.nick_name, printer_id: form.printer_id }).then(res => {
    if (res.status === 200) {
      ElMessage.success('修改成功')
      isShowDialog.value = false
      emit('onConfirm')
    }
  })
}, 3000)

function handleChange(val) { form.isKitchen = val }

async function fetchPrinterList() {
  try {
        const printers = await window.system.getPrinters()
        console.log('printers:', printers)
        printerList.value = printers
    } catch (error) {
        console.error('获取打印机列表失败:', error)
        printerList.value = []
    }
  
}

function getComputerList() {
  computerList().then(res => { if (res.status === 200) computerListData.value = res?.data?.list || [] })
}
</script>

<style lang="scss" scoped>
:deep(.content) {
    width: 1166px;
  }

.dialog-content {
  .title {
    font-size: 20px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #000000;
    margin-bottom: 10px;
  }
}
.form-box {
  display: flex;
  align-items: center;
  padding: 30px 0 20px 0;
  box-sizing: border-box;
  flex-wrap: wrap;
  .form-item {
    width: 33%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    // margin-right: 50px;
    .title {
      white-space: nowrap;
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      display: inline-block;
      margin-right: 20px;
    }
    .check-box {
      display: flex;
      .check-box-item {
        margin-right: 40px;
        display: flex;
        align-items: center;
        .img {
          width: 20px;
          height: 20px;
          margin-right: 12px;
          cursor: pointer;
        }
      }
    }
    .input {
      width: 200px;
      // height: 48px;
      background: #ffffff;
      border-radius: 12px;
    }
    .select {
      width: 200px ;
      // height: 48px ;
      background: #ffffff;
      border-radius: 12px;
    }

    .form-btn {
      width: 204px;
      height: 48px;
      background: #7c0a03;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}
.receive-bottom-btn {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
  .cancel-btn {
    width: 134px;
    height: 52px;
    line-height: 52px;
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 12px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    cursor: pointer;
  }
  .active {
    background: #7c0a03 !important;
  }
  .confirm-btn {
    width: 132px;
    height: 52px;
    background: #d2d2d2;
    line-height: 52px;
    border-radius: 12px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    margin-left: 40px;
    cursor: pointer;
  }
}

.check-title {
  font-size: 20px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
}
</style>

